<template>
  <div class="paySetRedact-mokuai">
    <div class="accounts-index">
      <div class="accounts-name">
        <div class="accounts-name-font">
          编辑支付方式
          <div class="float-right">
            <el-button icon="el-icon-arrow-left" @click.native="returnButton" size="small">返回</el-button>
          </div>
        </div>
      </div>
      <div class="paySetRedact-content">
        <!-- 用户设置 -->
        <div class="paySetRedact-setting">
          <el-form
            :model="ruleForm"
            status-icon
            :rules="rules"
            ref="ruleForm"
            label-width="220px"
            class="demo-ruleForm"
          >
            <el-form-item label="支付方式名称:" prop="name">
              <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>

            <el-form-item label="支付方式描述:" prop="description">
              <el-input
                type="textarea"
                :rows="4"
                placeholder="请输入内容"
                v-model="ruleForm.description"
              ></el-input>
            </el-form-item>

            <el-form-item label="微信公众号AppId:" prop="appId">
              <el-input v-model.number="ruleForm.appId"></el-input>
            </el-form-item>

            <el-form-item label="微信公众号AppSecret:" prop="appSecret">
              <el-input v-model.number="ruleForm.appSecret"></el-input>
            </el-form-item>

            <el-form-item label="商户支付密钥Key:" prop="appKey">
              <el-input v-model.number="ruleForm.appKey"></el-input>
            </el-form-item>
            <el-form-item label="受理商ID(即微信支付商户号)：" prop="merchantId">
              <el-input v-model.number="ruleForm.merchantId"></el-input>
            </el-form-item>

            <el-form-item label="支付手续费:" prop="fees">
              <el-input v-model.number="ruleForm.fees"></el-input>
            </el-form-item>

            <el-form-item label="货到付款:">
              <!-- <el-radio v-model="radio" label="1">是</el-radio> -->
              <el-radio v-model="ruleForm.isCashOnDelivery" label="1">是</el-radio>
              <el-radio v-model="ruleForm.isCashOnDelivery" label="0">否</el-radio>
            </el-form-item>
            <el-form-item label="在线支付:">
              <el-radio v-model="ruleForm.isPayOnline" label="1">是</el-radio>
              <el-radio v-model="ruleForm.isPayOnline" label="0">否</el-radio>
            </el-form-item>

            <el-form-item class="button-center">
              <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import paySetApi from "@/api/settings/paySet";

export default {
  data() {
    return {
      radio: "1",
      id: this.$route.query.id,
      // 表单
      ruleForm: {},
      rules: {
        name: [
          { required: true, message: "支付方式名称不能为空", trigger: "blur" }
        ],
        description: [
          { required: true, message: "支付方式描述不能为空", trigger: "blur" }
        ],
        appId: [
          {
            required: true,
            message: "微信公众号AppId不能为空",
            trigger: "blur"
          }
        ],
        appSecret: [
          {
            required: true,
            message: "微信公众号AppSecret不能为空",
            trigger: "blur"
          }
        ],
        appKey: [
          {
            required: true,
            message: "商户支付密钥Key不能为空",
            trigger: "blur"
          }
        ],
        merchantId: [
          { required: true, message: "受理商ID不能为空", trigger: "blur" }
        ],
        fees: [
          { required: true, message: "支付手续费不能为空", trigger: "blur" }
        ]
      }
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      paySetApi.findById(this.id).then(response => {
        const resp = response.data;
        console.log(resp.data);
        this.ruleForm = resp.data;
      });
    },
    // 返回
    returnButton() {
      this.$router.push({ path: "/settings/paySet" });
    },
    //
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          // console.log("kkk", this.ruleForm);
          paySetApi.updateById(this.ruleForm).then(response => {
            const resp = response.data;
            if (resp.code == 200) {
              //新增成功，刷新列表数据
              this.$router.push({ path: "/settings/paySet" });
            } else {
              this.$message({
                message: resp.msg,
                type: "warning"
              });
            }
          });
        } else {
          return false;
        }
      });
    }
  }
};
</script>
<style>
/* 自定义 */
.select-width {
  width: 100px;
}
.float-right {
  float: right;
}
.paySetRedact-mokuai {
  height: 1000px;
  background-color: rgb(249, 249, 249);
  padding-top: 30px;
}
.accounts-index {
  width: 80%;
  margin: auto;
  background-color: rgb(255, 255, 255);
}
.accounts-name {
  width: 100%;
  height: 40px;
  background-color: rgb(240, 240, 240);
}
.accounts-name-font {
  height: 40px;
  line-height: 40px;
  margin-left: 20px;
  font-size: 14px;
}
.paySetRedact-content {
  width: 100%;
  height: 750px;
}

.paySetRedact-setting {
  margin-top: 20px;
  margin-left: 15%;
  width: 55%;
}

.button-center {
  margin-left: 20%;
}
</style>
